<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>实际报道统计
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>
        <el-tabs type="card" @tab-click="handleClick">
          <el-tab-pane label="按学院统计">
            <div style="padding-bottom: 10px">
              <el-select
                  v-model="query.collegeId"
                  clearable
                  placeholder="请选择"
                  style="margin-left: 5px"
                  @change="handleSearch()"
              >
                <el-option
                    v-for="item in options"
                    :key="item.sid"
                    :label="item.collegeName"
                    :value="item.sid"
                    :disabled="item.collegeName!=='全学院'? false:true"
                >
                </el-option>
              </el-select>
              <!-- <el-button
            type="primary"
            @click="handleMajor">按专业统计</el-button> -->
              <!-- <el-select clearable v-model="major" placeholder="请选择" style="margin-left: 5px">
          <el-option v-for="item in options" :key="item.sid" :label="item.majorName" :value="item.majorName"></el-option>
        </el-select> -->

            </div>
            <el-table :data="tableData">
              <el-table-column
                  label="学院"
                  prop="name"
              ></el-table-column>
              <el-table-column
                  label="总应报到人数"
                  prop="studentTotalNum"
                  sortable
              ></el-table-column>
              <el-table-column
                  label="已报到人数"
                  prop="studentAlreadyNum"
                  sortable
              ></el-table-column>
              <el-table-column label="报到率">
                <template #default="scope">
                  {{ scope.row.alreadyRate }}%
                </template>
              </el-table-column>
              <el-table-column
                  label="预约今日报到人数"
                  prop="studentReserveTodayNum"
                  sortable
              ></el-table-column>
              <el-table-column
                  label="今日实际报道人数"
                  prop="studentTodayNum"
                  sortable
              ></el-table-column>
              <el-table-column label="今日报道率">
                <template #default="scope">
                  {{ scope.row.todayRate }}%
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  :currentPage="query.pageNum"
                  :page-size="query.pageSize"
                  :page-sizes="[10, 20, 40]"
                  :total="pageTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </el-tab-pane>

          <el-tab-pane label="按专业统计">
            <div style="padding-bottom: 10px">
              <el-select
                  v-model="query.majorId"
                  clearable
                  placeholder="请选择专业"
                  style="margin-left: 5px"
                  @change="handleSearchMajor()"
              >
                <el-option
                    v-for="item in optionsMajors"
                    :key="item.sid"
                    :label="item.majorName"
                    :value="item.sid"
                >
                </el-option>
              </el-select>
            </div>
            <el-table :data="tableData">
              <el-table-column
                  label="专业"
                  prop="name"

              ></el-table-column>
              <el-table-column
                  label="总应报到人数"
                  prop="studentTotalNum"
                  sortable
              ></el-table-column>
              <el-table-column
                  label="已报到人数"
                  prop="studentAlreadyNum"
                  sortable
              ></el-table-column>
              <el-table-column label="报到率">
                <template #default="scope">
                  {{ scope.row.alreadyRate }}%
                </template>
              </el-table-column>
              <el-table-column
                  label="预约今日报到人数"
                  prop="studentReserveTodayNum"
                  sortable
              ></el-table-column>
              <el-table-column
                  label="今日实际报道人数"
                  prop="studentTodayNum"
                  sortable
              ></el-table-column>
              <el-table-column label="今日报道率">
                <template #default="scope">
                  {{ scope.row.todayRate }}%
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  :currentPage="query.pageNum"
                  :page-size="query.pageSize"
                  :page-sizes="[10, 20, 40]"
                  :total="pageTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="按照班级统计">
            <div style="padding-bottom: 10px">
              <el-select
                  v-model="query.classId"
                  clearable
                  placeholder="请选择班级 "
                  style="margin-left: 5px"
                  @change="handleSearchClass()"
              >
                <el-option
                    v-for="item in optionsClasss"
                    :key="item.sid"
                    :label="item.className"
                    :value="item.sid"
                >
                </el-option>
              </el-select>
            </div>
            <el-table :data="tableData">
              <el-table-column
                  label="班级"
                  prop="name"

              ></el-table-column>
              <el-table-column
                  label="总应报到人数"
                  prop="studentTotalNum"
                  sortable
              ></el-table-column>
              <el-table-column
                  label="已报到人数"
                  prop="studentAlreadyNum"
                  sortable
              ></el-table-column>
              <el-table-column label="报到率">
                <template #default="scope">
                  {{ scope.row.alreadyRate }}%
                </template>
              </el-table-column>
              <el-table-column
                  label="预约今日报到人数"
                  prop="studentReserveTodayNum"
                  sortable
              ></el-table-column>
              <el-table-column
                  label="今日实际报道人数"
                  prop="studentTodayNum"
                  sortable
              ></el-table-column>
              <el-table-column label="今日报道率">
                <template #default="scope">
                  {{ scope.row.todayRate }}%
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  :currentPage="query.pageNum"
                  :page-size="query.pageSize"
                  :page-sizes="[10, 20, 40]"
                  :total="pageTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--    <el-dialog title="信息" v-model="dialogVisible" width="50%">-->
    <!--      <el-form :model="entity" label-width="100px">-->
    <!--        <el-form-item label="名称">-->
    <!--          <el-input v-model="entity.title" style="width: 80%"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="作者">-->
    <!--          <el-input v-model="entity.author" style="width: 80%"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="内容">-->
    <!--          <div id="div1"></div>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <template #footer>-->
    <!--          <span class="dialog-footer">-->
    <!--            <el-button @click="dialogVisible = false">取 消</el-button>-->
    <!--            <el-button type="primary" @click="save">确 定</el-button>-->
    <!--          </span>-->
    <!--      </template>-->
    <!--    </el-dialog>-->

    <!--    <el-dialog title="内容" v-model="vis" width="50%">-->
    <!--      <el-card>-->


    <!--        <div v-html="content"></div>-->
    <!--      </el-card>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script setup>
import request from "@/utils/request";
import {reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const query = reactive({
  collegeId: "",
  majorId: "",
  classId: "",
  type: "",
  pageNum: 1,
  pageSize: 10,
});
const tableData = ref([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
  tableData.value = []
  request
      .get("/college/queryReserveCollegeVo", {
        params: query,
      })
      .then((res) => {

        if (res.code != null) {
          tableData.value = res.data.records;
          pageTotal.value = res.data.total;

        } else {
          ElMessage.warning(res.msg);
          tableData.value = [];

        }
        // query.collegeId = " "
        // query.majorId = " "
        // query.classId = " "
        // query.type = " "
      });
};
getData();
//学院下拉框
const options = ref([]);
const getAllCollege = () => {
  console.log(query.collegeId);
  request.get("/college/getAllCollege").then((res) => {
    options.value = res.data;
    getMajor();
  });
};
getAllCollege()
//专业下拉框
const optionsMajors = ref([]);
const getMajor = () => {
  request
      .get("/major/queryList", {
        params: {type: 1},
      })
      .then((res) => {
        optionsMajors.value = res.data;
      });
};
getMajor();
//班级下拉框
const optionsClasss = ref([]);
const getClass = () => {
  request
      .get("/class/byMajorId")
      .then((res) => {
        optionsClasss.value = res.data;
      });
};
getClass();
// 查询操作 学院
const handleSearch = () => {
  tableData.value = []
  // getAllCollege()
  query.pageNum = 1;
  query.majorId = "";
  query.classId = ""
  query.type = "1";
  getData();
};
//专业统计
const handleSearchMajor = () => {
  tableData.value = []
  // getAllCollege()
  query.collegeId = "";
  query.classId = ""
  query.pageNum = 1;
  query.type = "2";
  getData();
};
//班级统计
const handleSearchClass = () => {
  tableData.value = []
  // getAllCollege();
  // getMajor();
  query.collegeId = "";
  query.majorId = "";
  query.pageNum = 1;
  query.type = "3";
  getData();
};
const handleClick = () => {
  tableData.value = []
};
// 分页大小
const handleSizeChange = (val) => {
  query.pageSize = val;
  getData();
};
// 分页导航
const handlePageChange = (val) => {
  query.pageNum = val;
  getData();
};
// 删除操作
const handleDelete = (index, sid) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
      .then(() => {
        request.delete("/student/" + sid).then((res) => {
          if (res.data) {
            ElMessage.success("删除成功");
            tableData.value.splice(index, 1);
          } else {
            ElMessage.error("删除失败");
          }
        });
      })
      .catch(() => {
      });
};
</script>

<style scoped>
</style>
